import Vue from 'vue'
import VueRouter from 'vue-router'
// import Login from '../views/login/login.vue'
// import Layout from '../views/layout/layout.vue'
// import Images from '../views/images/images.vue'
// import Articles from '../views/articles/articles.vue'
// import Edit from '@/views/articles/edit.vue'
// import Home from '../views/home/home.vue'
// import AddArticle from '../views/articles/addArticle.vue'
// import Comment from '@/views/comment/comment.vue'
// import Fans from '@/views/fans/fans.vue'
const Login = () => import(/* webpackChunkName: "login" */ '../views/login/login.vue')
const Layout = () => import(/* webpackChunkName: "Layout" */ '../views/layout/layout.vue')
const Images = () => import(/* webpackChunkName: "Images" */ '../views/images/images.vue')
const Articles = () => import(/* webpackChunkName: "Articles" */ '../views/articles/articles.vue')
const Home = () => import(/* webpackChunkName: "Home" */ '../views/home/home.vue')
const Edit = () => import(/* webpackChunkName: "Edit" */ '@/views/articles/edit.vue')
const AddArticle = () => import(/* webpackChunkName: "AddArticle" */ '@/views/articles/addArticle.vue')
const Comment = () => import(/* webpackChunkName: "Comments" */ '@/views/comment/comment.vue')
const Fans = () => import(/* webpackChunkName: "Fans" */ '@/views/fans/fans.vue')

// 实现路由懒加载，要把之前的import写法，改成箭头函数的写法
// import Settings from '@/views/settings/settings.vue'
const Settings = () => import(/* webpackChunkName: "settings" */ '@/views/settings/settings.vue')
// @. 是一个别名 表示src目录。这个功能是webpack提供的
Vue.use(VueRouter)
// 路由配置表，清空掉
const router = new VueRouter({
  routes: [
    // 登录页
    { path: '/login', component: Login },
    // 主页
    {
      path: '/',
      component: Layout,
      children: [ // 如果是页面内局部跳转需要用childern
        // path: '',是默认页面
        { path: '', component: Home },
        { path: '/articles', component: Articles },
        // 素材管理
        { path: '/image', component: Images },
        // 动态路由，可以匹配一切/edit/xxx路径
        { name: 'edit', path: '/edit/:id', component: Edit },
        { path: '/addArticle', component: AddArticle },
        // 评论管理
        { path: '/comment', component: Comment },
        // 粉丝管理
        { path: '/fans', component: Fans },
        // 个人设置
        { path: '/settings', component: Settings }

      ]
    }
  ]
})

// 路由导航守卫
//     只要是发生了路由的跳转（还没有进入到目标路由的页面），就会执行这个回调
// to: 要跳入的路由信息。  你要去哪里
// from: 要跳出的路由信息。你从哪里来
// next: 是一个函数，放行方法
//   - next() : 正确跳转。允许进入到 to 路由
//   - next(路由地址) : 不允许去to，而转去指定的路由地址
// 如果没有调用next()，则页面就不能正常显示了
const vipPages = ['/', '/articles', '/images']
router.beforeEach((to, from, next) => {
  // 所有路由跳转都会进入这个函数（beforeEach）
  const tokenStr = localStorage.getItem('tokenStr')
  // 1、有些页面必须登录后才能访问
  if (vipPages.includes(to.path) && !tokenStr) { // 如果你要去的页面是vipPages里的但没有tokenStr
    console.log('没有登录，是不能访问vip的')
    next('/login')
  } else if (to.path === '/login' && tokenStr) { // 如果我有token而且要去登录页，不允许去，要跳回主页
    next('/')
  } else {
    next()
  }
})
export default router
